<template>
  <div class="flex items-left flex-wrap">
    <!-- 产量数据 -->
    <div class="boardBox" v-for="(production, i) in productionGroup" :key="i">
      <div class="yield-title">
        <span>{{ production.yield }}</span>
        <span>{{ production.date }}</span>
      </div>
      <div class="yield-data">
        <span>{{ production.yieldData }}</span>
        <span></span>
      </div>
      <div class="value-title">
        <span>{{ production.value }}</span>
        <span>{{ production.salary }}</span>
      </div>
      <div class="value-data">
        <span>{{ production.valueData }}</span>
        <span>{{ production.salaryData }}</span>
      </div>
    </div>

    <el-divider />

    <!-- 进仓条数 -->
    <div class="boardBox" v-for="(warehouse, i) in warehouseGroup" :key="i">
      <div class="yield-title">
        <span>{{ warehouse.name }}</span>
        <span>{{ warehouse.date }}</span>
      </div>
      <div class="yield-data">
        <span>{{ warehouse.amount }}条</span>
        <span>{{ warehouse.ratio }}</span>
      </div>
      <div class="value-title">
        <span>织布重</span>
        <span>进仓重</span>
        <span>进仓磅重</span>
      </div>
      <div class="value-data">
        <span>{{ warehouse.clothWeight }}g</span>
        <span>{{ warehouse.warehouseWeight }}g</span>
        <span>{{ warehouse.poundWeight }}g</span>
      </div>
    </div>

    <el-divider />
    <!-- 布种产量图 -->
    <div class="chart-container">
      <div class="chart-box">
        <div class="chart-title">布种产量图</div>
        <div class="chart-body">
          <barChart />
        </div>
      </div>
      <div class="chart-box">
        <div class="chart-title">机台效率分布图</div>
        <div class="chart-body">
          <distributionMap />
        </div>
      </div>
    </div>

    <div class="chart-container">
      <div class="chart-box">
        <div class="chart-title">车间开机率</div>
        <div class="chart-body">
          <operatingRateChart />
        </div>
      </div>
      <div class="chart-box">
        <div class="chart-title">效益曲线表</div>
        <div class="chart-body">
          <efficiencyCurveChart />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import distributionMap from './charts/distributionMap.vue'
import { ref, reactive } from 'vue'
import barChart from './charts/barChart.vue'
import operatingRateChart from './charts/operatingRateChart.vue'
import efficiencyCurveChart from './charts/efficiencyCurveChart.vue'

const productionGroup = reactive([
  {
    yield: '当年总产量',
    yieldData: '94.31t',
    date: '2024年',
    value: '当年总产值',
    valueData: '29.76万元',
    salary: '当年总工资',
    salaryData: '26.8万元'
  },
  {
    yield: '当月总产量',
    yieldData: '7.52t',
    date: '2024年5月',
    value: '当月总产值',
    valueData: '6.26万元',
    salary: '当月总工资',
    salaryData: '4.14万元'
  },
  {
    yield: '昨日总产量',
    yieldData: '1.34t',
    date: '2024年5月24日',
    value: '19:00-07:00总产量',
    valueData: '0g',
    salary: '07:00-19:00总产量',
    salaryData: '1.34t'
  },
  {
    yield: '今日实时产量',
    yieldData: '803.64kg',
    value: '07:00-19:00总产量',
    valueData: '803.64kg',
    salary: '总产量'
  },
  {
    yield: '织工效率榜',
    yieldData: '',
    date: '',
    value: '',
    valueData: '',
    salary: '',
    salaryData: ''
  },
  {
    yield: '当前机台状况',
    yieldData: '',
    date: '',
    value: '',
    valueData: '',
    salary: '',
    salaryData: ''
  },
])
const warehouseGroup = reactive([
  {
    // 进仓条数
    name: '当月进仓条数',
    // 日期
    date: '2024年5月',
    // 条数量
    amount: 0,
    // 变化率
    ratio: '',
    // 织布重
    clothWeight: 0,
    // 进仓重
    warehouseWeight: 0,
    // 进仓磅重
    poundWeight: 0
  },
  {
    // 进仓条数
    name: '当日进仓条数',
    // 日期
    date: '2024年5月',
    // 条数量
    amount: 0,
    // 变化率
    ratio: '',
    // 织布重
    clothWeight: 0,
    // 进仓重
    warehouseWeight: 0,
    // 进仓磅重
    poundWeight: 0
  },
  {
    // 进仓条数
    name: '昨日进仓条数',
    // 日期
    date: '2024年5月',
    // 条数量
    amount: 0,
    // 变化率
    ratio: '',
    // 织布重
    clothWeight: 0,
    // 进仓重
    warehouseWeight: 0,
    // 进仓磅重
    poundWeight: 0
  }
])
</script>

<style>
.boardBox {
  min-width: 250px;
  margin-top: 10px;
  margin-left: 10px;
  border-radius: 8px;
  padding: 5px;
  background-color: rgb(255, 255, 255);
  border: 2px solid rgb(218, 222, 228);
}

.yield-title {
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  color: rgb(109, 112, 112);
  margin-bottom: 5px;
}

.yield-data {
  font-size: 18px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;

}

.value-title {
  font-size: 12px;
  color: rgb(123, 126, 129);
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;

}

.value-data {
  font-size: 18px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;

}

.chart-container {
  display: flex;
  width: 100%;
  padding: 10px;
  gap: 10px;
}

.chart-box {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.chart-title {
  min-height: 30px;
  background-color: rgb(239, 239, 238);
  line-height: 30px;
  padding: 5px;
  font-size: 16px;
  font-weight: bold;
}

.chart-body {
  min-height: 300px;
}
</style>